<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      帮帮车主
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text style="position: absolute; left: 50%; transform: translateX(-50%)"
        >帮帮车主</text
      >
      <!-- #endif -->
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
        :style="paddingR"
      />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"> </view>
    <view class="bannerBox" :class="scrollTop > 20 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
        >
          <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            @click="bannerD(item.id)"
          >
            <image :src="imgUrl + item.picturePath" mode="aspectFill" />
            <view class="byTitle"
              ><span>{{ item.title }}</span></view
            >
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="cu-list grid col-4 no-border" style="margin: 0 auto; width: 690rpx">
      <view class="cu-item" @click="tiaozhuan(1)">
        <view
          class="img"
          style="display: flex; align-items: center; justify-content: center"
        >
          <image
            style="width: 84rpx; height: 69rpx"
            src="https://pic.bangbangtongcheng.com/static/bbcz/cyxx01.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">车源信息</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(3)">
        <view
          class="img"
          style="display: flex; align-items: center; justify-content: center"
        >
          <image
            style="width: 84rpx; height: 69rpx"
            src="https://pic.bangbangtongcheng.com/static/bbcz/czfw01.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">车主服务</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(2)">
        <image
          class="img"
          src="https://pic.bangbangtongcheng.com/static/bbcz/jxs01.png"
        />
        <text style="font-size: 30rpx; color: #333333">商家</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(4)">
        <image class="img" src="https://pic.bangbangtongcheng.com/static/nav_icon4.png" />
        <text style="font-size: 30rpx; color: #333333">地图找车</text>
      </view>
    </view>
    <view class="gonggao">
      <image
        class="lis"
        src="https://pic.bangbangtongcheng.com/static/ptgg01.png"
        mode=""
      ></image>
      <view class="li gong">
        <swiper
          style="min-height: 0rpx; height: 60rpx"
          :circular="true"
          :autoplay="true"
          :vertical="true"
          :display-multiple-items="WatchList.length > 2 ? 2 : WatchList.length"
          interval="3000"
          duration="500"
        >
          <swiper-item
            v-for="(item, index) in WatchList"
            :key="index"
            @click="WatchNav(item.id)"
          >
            <view class="text">{{ item.title }}</view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view class="bigIndexQie">
      <view
        class="text"
        :class="switchRecomData == 1 ? 'active' : ''"
        @click="switchRecom(1)"
        >精选车源</view
      >
      <view
        class="text"
        :class="switchRecomData == 2 ? 'active' : ''"
        @click="switchRecom(2)"
        >精选服务</view
      >
    </view>
    <view class="list">
      <template v-if="switchRecomData == 1">
        <view
          class="liss"
          v-for="(item, index) in Recommend"
          :key="index"
          @click="details(item)"
        >
          <image mode="aspectFit" :src="item.vehicleCoverPicture" />
          <view class="li_2" style="max-width: 336rpx">
            <view class="vehicleRecom">
              <span class="tagLabel">{{
                item.vehicleType == 1
                  ? "到店新车"
                  : item.vehicleType == 2
                  ? "二手车"
                  : "在售车系"
              }}</span>
              <text>{{ item.title }}</text>
              <!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
						<span v-else>{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
            </view>
            <view class="price" v-if="item.vehicleType != 3"> {{ item.price }}万 </view>
            <view class="price" v-else> {{ item.intervalPrice }}万 </view>
          </view>
        </view>
      </template>
      <template v-else-if="switchRecomData == 2">
        <view
          class="liss"
          v-for="(item, index) in Recommend"
          :key="index"
          @click="detailfw(item.id)"
        >
          <image mode="aspectFit" :src="item.coverPhoto" />
          <view class="li_3" style="max-width: 336rpx">
            <view class="servicesAvailable">{{ item.title }}</view>
            <view class="serviceContent">
              {{ item.entryDescription }}
            </view>
          </view>
        </view>
      </template>
    </view>
    <view v-if="Recommend.length == 0" class="none">
      <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
      <view>没有更多数据了</view>
    </view>
    <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    <view v-if="scrollTop > 20" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view class="zbc" v-if="zbc">
      <view class="tan">
        <view class="text">商家已将您标记为离职，是否同意？</view>
        <view class="xiao" @click="guan">稍后</view>
        <view class="tong" @click="agreelz">同意</view>
        <view class="guan" @click="guan">×</view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
 import {
   mapGetters
 } from "vuex";
 let statusBarHeight;
 //#ifdef H5
 import wxshare from "../../utils/index.js";
 statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
 //#endif
 // #ifdef APP-PLUS
 statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
 //  #endif
 // #ifdef MP-WEIXIN
 statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
 //  #endif
 export default {
   data() {
      const pr = this.$menuBtnInfo.pr ? `right: ${this.$menuBtnInfo.pr + 5}px` : '';
      return {
       paddingR: pr,
       statusBarHeight,
       zbc: false,
       pageSize: 10,
       pageNo: 1,
       trigger: false,
       downStatus: true,
       upStatus: true,
       bannerList: [],
       Recommend: [],
       WatchList: [],
       imgUrl: this.$imgSrc,
       showType: false,
       orderSort: "1",
       scrollTop: "0",
       userInfo: uni.getStorageSync("Pduser"),
       phone: "",
	switchRecomData:1,
     };
   },
   components: {
   },

   computed: {
     ...mapGetters(["statusBarHeight1", "userinfo"])
   },


   onShow() {
     this.userInfo = uni.getStorageSync("Pduser");
     this.phone = this.userInfo.phone;
     if (this.phone) {
       this.getUserPhone();
     }
     this.zbc = false;
     clearTimeout(time);
     var time = setTimeout(() => {
       if (getApp().globalData.confirm) {
         this.zbc = true;
       }
       clearTimeout(time);
     }, 1000);
   },
onPullDownRefresh() {
	this.Recommend = [];
	this.pageNo = 1;
	this.downStatus = true;
	if (this.upStatus) {
		this.trigger = true;
		this.switchRecomList()
	}
   },
   onReachBottom() {
     this.down();
   },
   async onLoad(options) {
     uni.hideTabBar();
     if (options.wxOpenid) {
       let userInfo = {
         openid: options.wxOpenid,
         headimgurl: options.image,
         nickname: options.nickname
       };
       uni.setStorageSync("userInfo", userInfo);
     }
     await this.getBanner();
     await this.getWatch();
     await this.switchRecomList();
     /* #ifdef H5 */
     this.jinzhi();
     /* #endif */
     const user = uni.getStorageSync('Pduser')
   },
   filters: {
     nums(val) {
       return val.toFixed(2);
     }
   },
   onPageScroll: function (Object) {
     this.scrollTop = Object.scrollTop; //实时获取到滚动的值
   },
   methods: {
	// 切换车源推荐，房源推荐
	switchRecom(index){
		this.switchRecomData=index
		this.Recommend = [];
		this.pageNo = 1;
		this.switchRecomList()
	},
	// 切换推荐改变数据
	switchRecomList(){
		this.downStatus=true
		if (this.switchRecomData==1) {
			this.getRecommend()
		}else if(this.switchRecomData==2){
			this.getRecommend()
		}
	},
	fanhui(){
		uni.navigateBack({
			delta: 1
		})
	},
	sousuo() {
		// if (!this.userinfo.phone) {
		//   uni.showToast({
		// 	title: "请登录",
		// 	icon: "none",
		// 	mask: true
		//   });
		//   return;
		// }
		uni.navigateTo({
		  url: "/pages_owner/release/searchPage?searchType=2"
		});
	},
	getUserPhone() {
		let that = this;
		this.$myRequest
		.get("/mob/login/getUserInfoByPhone", {
			phone: this.phone
		})
		.then(res => {
			this.userInfo = res.userInfo;
			uni.setStorageSync("Pduser", res.userInfo);
			that.$store.dispatch("user/login", res.userInfo);
		});
	},
	//同意离职
	agreelz() {
		this.zbc = false
		getApp().globalData.confirm = false
		if (this.userInfo.businessType==1) {
			this.$myRequest.post("/mob/user/confirmResignation", {
				id: this.userInfo.id
			})
			.then(data => {
				if (data.code == 200) {
					this.guan();
				}
			});
		}else{
			this.$myRequest.post("/api/mobile/vehicleOwner/confirmResignation", {
				userId: this.userInfo.id
			})
			.then(data => {
				if (data.code == 200) {
					this.guan();
				}
			});
		}
	},
	jinzhi() {
		let _this = this;
		let param = window.location.href.split("#")[0];
		uni.request({
		method: "post",
		data: {
			url: param
		},
		header: {
			"content-type": "application/x-www-form-urlencoded"
		},
		url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
			success(re) {
			_this.setWxShare(re.data);
			}
		});
	},
	setWxShare(data) {
		let _this = this;
		wxshare.config({
			debug: false, //是否打开调试
			appId: data.appId, // 公众号的唯一标识
			timestamp: data.timestamp, // 生成签名的时间戳
			nonceStr: data.nonce, // ，生成签名的随机串
			signature: data.signature, // 签名
			jsApiList: [
				"updateAppMessageShareData",
				"updateTimelineShareData",
				"openLocation",
			],
		});
		wxshare.ready(function () {
			//分享给朋友
			wxshare.updateAppMessageShareData({
				title: "帮帮同城-平度人都在用的生活服务平台", // 分享标题
				desc: "找车就用帮帮同城!", // 分享描述
				link: `https://www.bangbangtongcheng.com/conven//login/Wxlogin.do`, // 当前页面链接pp
				imgUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png", // 分享图标
				success: function () {
					//分享成功回调
				},
				cancel: function () {
					//取消分享回调
				}
			});
			wxshare.updateTimelineShareData({
				title: "帮帮同城-平度人都在用的生活服务平台", // 分享标题
				desc: "找车就用帮帮同城!", // 分享描述
				link: `https://www.bangbangtongcheng.com/conven//login/Wxlogin.do`, // 当前页面链接pp
				imgUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png", // 分享图标
				success: function () {},
				cancel: function () {}
			});
		});
	},
	onShareAppMessage: function (res) {
		let that = this;
		// console.log(that.imgUrl + that.data.logo);
		if (res.from === "menu") {
			// 来自页面内分享按钮
		}
		return {
			title: '帮帮同城-平度人都在用的生活服务平台',
			path: "/pages/index/index",
			desc: "找车就用帮帮同城",
			imageUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png",
		};
	},
	onShareTimeline() {
		return {
			title: '帮帮同城-平度人都在用的生活服务平台',
			path: '/pages/index/index',
			imageUrl: "https://pic.bangbangtongcheng.com/static/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E4%BA%AB.png",
		};
	},
	// 轮播图跳转
	bannerD(id) {
		uni.navigateTo({
			url: "/pages/index/bannerData?id=" + id
		});
	},
	guan() {
		this.zbc = false;
		getApp().globalData.confirm = false;
	},
	down() {
		if (this.downStatus) {
			this.pageNo++;
			this.switchRecomList();
		}
	},
	async up() {
		this.Recommend = [];
		this.pageNo = 1;
		this.downStatus = true;
		if (this.upStatus) {
			this.trigger = true;
			await this.switchRecomList();
		}
	},
	//回到顶部
	totop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	},
	// 滚动列表跳转
	WatchNav(id) {
		uni.navigateTo({
			url: "/pages_index/Watch/details?id=" + id
		});
	},
	//离职弹窗
	guan() {
		this.zbc = false;
	},
	// 跳转房源或车主或地图
	tiaozhuan(num) {
		if (num==1) {
			uni.navigateTo({
				url: "/pages_owner/carSource/index",
			});
		}else if(num==2){
			uni.navigateTo({
				url: "/pages_owner/dealer/index",
			});
		}else if(num==3){
			uni.navigateTo({
				url: "/pages_owner/ownerService/index",
			});
		}else if(num==4){
			uni.navigateTo({
				// #ifdef APP
				url: "/pages/mapFind/Map"
				//#endif
				// #ifndef APP
				url: "/pages_mapFind/mapHouse"
				//#endif
			});
		}

	},
	// 车源跳转
	details(item) {
		if (item.vehicleType==3) {
			uni.navigateTo({
				url: "/pages_owner/index/carSeriesDetails?id=" + item.id,
			});
		}else{
			uni.navigateTo({
				url: "/pages_owner/index/vehicleDetails?id=" + item.id,
			});
		}
	},
	// 服务跳转
	detailfw(id){
		uni.navigateTo({
			url: "/pages_owner/ownerService/servicesAvailableDetails?id=" + id,
		});
	},
	//房源数据
	getRecommend() {
		this.upStatus = false;
		this.$myRequest
		.get("/api/mobile/vehicleOwner/getHomePageListByConditions", {
			pageSize: this.pageSize,
			pageNo: this.pageNo,
			userId:this.userInfo.id,
			category:this.switchRecomData
		})
		.then(res => {
			if (!res.homePageList.pageList.length) {
				this.downStatus = false;
			}
			this.upStatus = true;
			this.trigger = false;
			this.Recommend = this.Recommend.concat(res.homePageList.pageList);
			uni.stopPullDownRefresh();
		});
	},
	// 轮播图
	getBanner() {
		this.$myRequest
		.get("/api/mobile/vehicleOwner/getCarouselChartsByType", {
			carouselType:"1",
			type: "2"
		})
		.then(res => {
			this.bannerList = res.carouselChartsList.pageList;
		});
	},
	// 滚动数据
	getWatch() {
		this.$myRequest
		.get("/mob/home/getWatch", {
			pageSize: 10,
			pageNo: 1,
			auditStatus: 2
		})
		.then(res => {
			this.WatchList = res.list;
		});
	}
   }
 };
</script>

<style lang="less">
.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;

  .tan {
    position: absolute;
    width: 600rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    top: 34%;
    left: 75rpx;

    .text {
      width: 100%;
      text-align: center;
      margin-top: 80rpx;
      font-size: 36rpx;
    }

    .xiao {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      border-radius: 37rpx;
      left: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #64b6a8;
    }

    .tong {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 37rpx;
      right: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
    }

    .guan {
      position: absolute;
      width: 58rpx;
      height: 58rpx;
      border: 4rpx solid #ffffff;
      border-radius: 50%;
      left: 50%;
      transform: translateX(-50%);
      bottom: -100rpx;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      font-size: 56rpx;
    }
  }
}
.bigIndexQie {
  display: flex;
  align-items: center;
  height: 137rpx;
  margin-left: 50rpx;
  .text {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    margin-right: 50rpx;
  }
  .active {
    color: #64b6a8;
    font-size: 36rpx;
    position: relative;
    padding-bottom: 6rpx;
  }
  .active::before {
    content: "";
    display: block;
    width: 44rpx;
    height: 4rpx;
    background: #64b6a8;
    border-radius: 3rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
uni-page-body,
page {
  height: 100%;
}
.box {
  width: 100%;
  min-height: 100%;
  padding-bottom: 120rpx;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;
  /* #endif */
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }

  .image2 {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    bottom: 16rpx !important;
    right: 30rpx;
  }
}
.bannerBox {
  width: 100%;
  height: 400rpx;
  background: #64b6a8;
  padding-top: 28rpx;
  margin-top: -4rpx;

  .banner {
    margin-left: 30rpx;
    width: 690rpx;
    height: 346rpx;
    overflow: hidden;
    border-radius: 24rpx;
    .byTitle {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1);

      span {
        width: 650rpx;
        padding: 0 20rpx;
        position: absolute;
        bottom: 46rpx;
        font-size: 34rpx;
        font-weight: 500;
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.Ptop {
  /* #ifdef H5 || APP-PULS */
  // padding-top: 104rpx;
  margin-top: 98rpx;
  /* #endif */
  /* #ifdef H5*/
  // padding-top: 104rpx;
  margin-top: 0rpx;
  /* #endif */

  /* #ifdef MP  */
  // margin-top: 188rpx;
  /* #endif */
}

.fixed {
  // display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
}

.cu-item .img {
  width: 100rpx;
  height: 100rpx;
  margin-left: 50%;
  transform: translateX(-50%);
}

.cu-item text {
  font-size: 30rpx;
  color: #333333;
}

.gonggao {
  width: 690rpx;
  height: 100rpx;
  margin-left: 32rpx;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(67, 67, 67, 0.16);
  border-radius: 12rpx;
  display: flex;
  .lis {
    width: 150rpx;
    padding: 10rpx 30rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .img1 {
      width: 87rpx;
      height: 50rpx;
    }
  }
  .gong {
    width: 518rpx;
    height: 60rpx;
    margin-top: 20rpx;
    // margin-left: 14rpx;
    border-left: 2rpx solid #d0d0d0;

    .text {
      width: 518rpx;
      font-size: 26rpx;
      line-height: 32rpx;
      margin-left: 12rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #333333;
    }
  }
}

.tit1 {
  color: #333333;
  font-size: 38rpx;
  display: flex;
  justify-content: space-between;
  width: 690rpx;
  margin: 50rpx auto 24rpx;

  .tg {
    color: #64b6a8;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    position: relative;

    .triangle {
      width: 0px;
      height: 0px;
      box-sizing: content-box;
      border-left: 8rpx solid transparent;
      border-right: 8rpx solid transparent;
      border-bottom: 15rpx solid #64b6a8;
      margin-left: 20rpx;
      transition: all 0.5s;
    }

    .fan {
      transition: all 0.5s;
      transform: rotate(180deg);
    }

    .kuang {
      position: absolute;
      left: -240rpx;
      top: 120%;
      background: #fff;
      // transform: translateY(-50%);
      width: 330rpx;
      padding: 0 30rpx;
      z-index: 20;
      box-shadow: 0 0 8rpx 4rpx rgba(0, 0, 0, 0.3);

      .item {
        height: 90rpx;
        line-height: 90rpx;
        border-bottom: 2rpx solid #e0e0e0;
      }

      .item:last-child {
        border-bottom: 0;
      }
    }
  }
}

.list {
  margin-left: 30rpx;
  width: 720rpx;

  .li {
    width: 96%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;

    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_1 {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-left: 24rpx;
      .tit {
        width: 366rpx;
        font-size: 36rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
      }
      .jiedao {
        width: 366rpx;
        font-size: 26rpx;
        margin-bottom: 14rpx;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        min-height: 64rpx;
      }
      .shijian {
        bottom: 4rpx;
        font-size: 28rpx;
        white-space: nowrap;

        align-items: center;

        .ycyc {
          display: inline-block;
          width: 70rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 12.5px;
        }
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
  .liss {
    width: 96%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }
    .li_2 {
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .vehicleRecom {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
      }
      .price {
        font-size: 38rpx;
        font-weight: 600;
        color: #e00000;
      }
    }
    .li_3 {
      margin-left: 24rpx;
      .servicesAvailable {
        font-size: 32rpx;
        font-weight: 500;
        color: #64b6a8;
        margin-bottom: 20rpx;
      }
      .serviceContent {
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.hui {
  position: fixed;
  right: 30rpx;
  bottom: 154rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 26rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>
